<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="form" ref="form">
          <div class="filter-container" style="height:0px">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="标签名称：" prop="tags">
                  <el-input
                    @keyup.enter="hQuery"
                    style="width: 180px;"
                    placeholder="请输入"
                    class="filter-item"
                    v-model="form.tags"
                  ></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="城市">
                  <MyCity v-model="form.provAndCity"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称：" prop="shortName">
                  <el-input v-model.trim="form.shortName" style="width: 180px;"></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span="4">
                <el-form-item label="状态：" prop="state">
                  <el-select
                    class="filter-item"
                    style="width: 100px;"
                    v-model="form.state"
                    clearable
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    :loading="isLoading"
                    size="small"
                    type="primary"
                    @click="hQuery"
                  >查询</el-button>
                  <el-button
                  size="small"
                  @click="hResetForm">重置</el-button>
                </el-form-item>
              </el-col>
                  <el-col :span="8">
                <el-form-item>
                  <el-button
              class="filter-item fr"
              size="small"
              style="margin-left: 10px;"
              @click="hAddComponey"
              type="success"
              icon="el-icon-edit"
            >新增技巧</el-button>

                </el-form-item>
              </el-col>
            </el-row>

          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="cResultTip"
          :title="cResultTip"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          :data="companys"
          v-loading="isLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" label="序号" width="70" prop="id">

          </el-table-column>
          <el-table-column align="center" label="文章标题" prop="title">

          </el-table-column>
          <el-table-column align="center" label="阅读数" prop="creatorID">

          </el-table-column>
          <el-table-column label="录入人" prop="username">

          </el-table-column>
          <el-table-column align="center" label="录入时间" prop="createTime">

          </el-table-column>
          <!-- <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.addDate}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <span>{{scope.row.remarks.substring(0,3)}}</span>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="状态" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="250"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button type="text" size="small" @click="hEdit('preview',scope.row)">预览</el-button>
              <el-button type="text" size="small" @click="hSwitchStatus(scope.row)">
                <span >{{scope.row.state ===0 ? '启用' : '禁用'}}</span>
              </el-button>
               <el-button type="text" size="small" @click="hEdit('edit',scope.row)">修改</el-button>
              <el-button
                v-if="scope.row.status!='deleted'"
                size="small"
                type="text"
                @click="hDelete(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination" v-show="total">
          <div class="pages">
            <!--  @size-change每页显示条数发生变化 -->
            <!--  @current-change页码变化触发事件 -->
            <!--  :current-page当前页控制按钮高亮 -->
            <!--  :page-sizes每页显示条数选项 -->
            <!--  :page-size每页显示条数 -->
            <!--    layout="sizes, prev, pager, next, jumper"分页按钮排版布局 -->
            <!--   :total总条数 -->
            <el-pagination
              background
              @size-change="hSizeChange"
              @current-change="hCurrentChange"
              :current-page="Number(form.page)"
              :total="Number(total)"
              :page-size="Number(form.pagesize)"
              :page-sizes="[10,20,30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- 弹窗 -->
      </el-card>
        <!-- <el-dialog
        :title="新增员工"
        :visible.sync="isShowDialog"
        v-if="isShowDialog"

        >
      <el-form   :rules="ruleInline"
      ref="dataForm"
      label-width="250px"
      style=" margin-left:-180px;"
       :model="form">
  <el-form-item label="标题" prop="title">
    <el-input v-model="form.title" placeholder="新增技巧"></el-input>
  </el-form-item>
  <el-form-item label="内容" prop="articleBody">
    <quill-editor style="height:200px"></quill-editor>
  </el-form-item>

  <el-form-item style="margin-top:100px">
    <el-button type="primary">确认</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

      </el-dialog> -->
      <el-dialog
  title="提示"
  :visible.sync="isShowDialog"
@close="closeDialog"
 >
 <div v-if= "curCompanyId==='preview'">
 <div>
      <h3>{{form.title}}</h3>
      <p><span> {{form.createTime | parseTimeByString}} </span><span> {{form.username}} </span><span> <i class="el-icon-view"></i> {{form.visits}} </span></p>
      <div v-html="form.articleBody" class="articleBody">
      </div>
    </div>
 </div>
   <el-form v-else
     :rules="ruleInline"
      ref="form"
      label-width="250px"
      style=" margin-left:-180px;"
       :model="form">
  <el-form-item label="标题" prop="title">
    <el-input v-model="form.title" placeholder="新增技巧"></el-input>
  </el-form-item>
  <el-form-item label="内容" prop="articleBody">
    <quill-editor style="height:200px" v-model="form.articleBody" @blur="$refs.form.validateField('articleBody')"></quill-editor>
  </el-form-item>
    <el-form-item label="视频地址" prop="videoURL" style="margin-top:110px">
    <el-input v-model="form.videoURL" placeholder="视频地址"></el-input>
  </el-form-item>
  <el-form-item style="margin-top:30px">
    <el-button type="primary" @click="submit">确认</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
    </div>

  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'

import { list, add, remove, update, detail, changeState } from '@/api/hmmm/articles'
// import CompanysAdd from '@/module-hmmm/pages/companys/article-add.vue'

// import MyCity from './citys'
// 倒入富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'CompanysList',
  components: {
    // CompanysAdd
    // MyCity
    quillEditor
  },

  data () {
    return {
      companys: [],
      total: 0,

      curCompanyId: null, // 区别于是否是编辑，还是添加

      isLoading: false,
      // 新增显示隐藏
      isShowDialog: false,
      drawerType: '',
      // 查询表单中的参数
      form: {
        videoURL: '',
        title: '',
        articleBody: '',
        shortName: '',
        state: null,
        tags: '',

        page: 1,
        pagesize: 10
      },
      // 校验规则
      ruleInline: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // drawerTitle () {
    //   let title = '大标题'
    //   // 根据drawerType的值返回标题内容
    //   if (this.drawerType === 'add') {
    //     title = '添加面经'
    //   } else if (this.drawerType === 'preview') {
    //     title = '面经预览'
    //   } else if (this.drawerType === 'edit') {
    //     title = '面经编辑'
    //   }
    //   return title
    // },
    status () {
      return status
    },
    cResultTip () {
      return `共 ${this.total} 条记录`
    },
    cTitle () {
      return this.curCompanyId ? '编辑公司' : '添加新公司'
    }
  },
  // 创建完毕,做一次查询
  created () {
    this.loadCompanys()
  },

  methods: {
    async submit () {
      console.log('单机确认按钮1')
      try {
        await this.$refs.form.validate()
        // 判断操作类型
        if (this.curCompanyId === '') {
          await add(this.form)
          // 提示
          this.$message.success('添加成功')
        } else if (this.curCompanyId === 'edit') {
          await update(this.form)
          this.$message.success('修改成功')
        }
        // 发请求提交数据

        this.page = 1
        // 渲染数据
        this.loadCompanys()
        // 关抽屉
        this.closeDialog()
        this.curCompanyId = add
      } catch (error) {
        console.log(error)
      }
    },
    buildParams () {
      const paramsObj = {}
      const { page, pagesize, tags, state } = this.form
      // 如果某一个参数是null,则axios就不会发这个参数
      // 如果某一个参数是""，axios是会发出这个参数
      paramsObj.page = page || null
      paramsObj.pagesize = pagesize || null
      paramsObj.tags = tags || null

      paramsObj.state = state === '' ? null : state
      return paramsObj
    },
    // 获取列表数据
    async loadCompanys () {
      this.isLoading = true
      // 构建查询参数
      const paramsObj = this.buildParams()

      try {
        // const { data: res } = await getCompanys(paramsObj)
        // 获取数据给companys
        const { data: res } = await list(paramsObj)
        console.log('res', res)
        this.companys = res.items
        // 获取总条数
        this.total = res.counts

        this.isLoading = false
      } catch (err) {
        console.log(err)
        this.isLoading = true
      }
    },
    // 重置整个表单
    hResetForm () {
      // el 表单组件上有一个resetFields方法
      this.$refs.form.resetFields()

      // 由于provAndCity传给了自定义组件，它们并不是在当前表单中直接
      // 使用的，所以，这里要去做手动清空
      // this.form.provAndCity.province = ''
      // this.form.provAndCity.city = ''
    },
    // 搜索信息
    hQuery () {
      // 重置页码
      this.form.page = 1
      // 重发请求
      this.loadCompanys()
    },
    // 更改每页显示的条数
    hSizeChange (val) {
      this.form.pagesize = val

      if (this.form.page === 1) {
        this.loadCompanys()
      }
    },
    // 点击某一个页码
    hCurrentChange (curPage) {
      this.form.page = curPage
      this.loadCompanys()
    },

    // 新增用户、编辑用户点击显示弹窗
    hAddComponey () {
      this.curCompanyId = ''
      this.isShowDialog = true
    },
    // 关闭弹窗
    closeDialog () {
      // 清空表单
      this.$refs.form.resetFields()

      this.isShowDialog = false
    },

    async  hEdit (type, id) {
      console.log(type, id)
      this.curCompanyId = type
      this.isShowDialog = true
      if (type !== 'add') {
        const { data } = await detail(id)
        console.log('data', data)
        this.form = data
        this.form.id = data.id
      }
    },
    async doDelete (id) {
      try {
        await remove({ id })
        this.$message.success('成功删除了用户!')
        this.loadCompanys()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    // 删除
    hDelete (userId) {
      console.log(userId)
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.doDelete(userId)
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    async doSwitch (row) {
      var data = {
        id: row.id,
        state: Number(!row.state)
      }
      console.log(data)
      await changeState(data)
        .then(response => {
          this.$message.success('操作成功!')
          this.loadCompanys(this.form)
        })
        .catch(response => {
          this.$message.error(status + '失败!')
        })
    },
    // 启用、禁用
    hSwitchStatus (row) {
      const tip = '已成功' + (row.state ? '禁用' : '启用') + ', 是否继续?'
      this.$confirm(tip, '提示', {
        type: 'warning'
      })
        .then(() => {
          this.doSwitch(row)
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.articleBody {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-top: 1px dashed #ccc;
}
.pagination {
  margin-top: 10px;
  margin-left: 800px;
}
</style>
<style scoped>

.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
/* .el-from{
  height: 300px;
}
.el-dialog__body{
  margin-top:200px;
  height: 500px;
} */
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}

</style>
